import "./index.scss"
import {
	View,
	Image,
	Text,
	Switch,
	RadioGroup,
	Label,
	Radio,
	Button,
	Input
} from "@tarojs/components"
import {getStorage} from "@/utils/localstoreage"
import {observer} from "mobx-react"
import {useContext, useEffect, useState} from "react"
import Taro, {useDidHide, useDidShow, useRouter} from "@tarojs/taro"
import {uploadSwitchSettingStore} from "./model"
import {readSwitchApi, sendSwitchApi} from "@/api/waterSupplyStationControl.ts"
import {AtButton, AtSegmentedControl} from "taro-ui"

const waterSupplyStationControlSetting = () => {
	let router = useRouter()
	const {updatePageQuery, pageQuery, clearPageQuery} = useContext(uploadSwitchSettingStore)

	// 当前模式标识
	// 1-手动   2-自动    (请求时校准)
	const [currentMode, setCurrentMode] = useState(0)

	// 雨水和污水的标识
	// 1-雨水   2-污水
	const [waterC, setWaterC] = useState(0)

	// 间隔时间数据
	const [intervalTime, setIntervalTime] = useState(0)

	// 雨水液位界限值
	const [ywLimit, setywLimit] = useState(0)

	// 雨水和污水选择的Radio数据
	const ywSelectRadioData = [
		{
			value: 1,
			text: "雨水",
			checked: false
		},
		{
			value: 2,
			text: "污水",
			checked: false
		}
	]

	// 轻提示函数
	// const showToastFunc = (status, flag) => {
	// 	Taro.showToast({
	// 		title: `${flag ? "开启" : "关闭"}${status ? "成功" : "失败"}`,
	// 		icon: `${status ? "success" : "error"}`,
	// 		duration: 1200,
	// 		mask: true
	// 	})
	// }

	// 查询配置的函数
	const readSwitchFunc = async () => {
		Taro.showLoading({
			title: "加载中",
			mask: true
		})
		await readSwitchApi({
			devGId: router.params.devGId
		})
			.then(res => {
				console.log("查询配置成功", res)
				setCurrentMode(res.data.mode - 1)
				setWaterC(res.data.collectType)
				setIntervalTime(res.data.intervalTime)
				setywLimit(res.data.ywLimit)
			})
			.finally(() => {
				Taro.hideLoading()
			})
	}

	// 修改配置的请求函数
	const sendSwitchFunc = async () => {
		Taro.showLoading({
			title: "保存中",
			mask: true
		})
		let subWaterC
		if (currentMode == 1) {
			subWaterC = 1
		} else {
			subWaterC = waterC
		}
		let sData = `${currentMode + 1},${subWaterC},${intervalTime},${ywLimit}`
		let userId = getStorage("userId")
		console.log("水站控制修改数据", sData)

		await sendSwitchApi({
			devGId: router.params.devGId,
			data: sData,
			userId: userId
		})
			.then(res => {
				Taro.showToast({
					title: "保存成功",
					icon: "success",
					mask: true,
					duration: 1200
				})
			})
			.catch(err => {
				Taro.showToast({
					title: err.msg,
					icon: "error",
					mask: true,
					duration: 1200
				})
			})
			.finally(() => {
				readSwitchFunc()
			})
	}

	// 可以使用所有的 React Hooks
	useEffect(() => {
		console.log("Uploadswitchsetting useEffect")
	})
	// 对应 onShow
	useDidShow(() => {
		console.log("Uploadswitchsetting useDidShow")
		updatePageQuery(router.params)
		console.log(router.params, "router.params")
		readSwitchFunc()
	})
	// 对应 onHide
	useDidHide(() => {
		console.log("Uploadswitchsetting useDidHide")
		clearPageQuery()
	})

	// tabs点击事件
	const tabsClick = e => {
		setCurrentMode(e)
	}

	// 雨水污水模块点击事件
	const ywMouleClick = e => {
		setWaterC(e)
	}

	// 间隔时间的Input事件
	const intervalTimeInput = e => {
		console.log(e.detail.value)

		setIntervalTime(e.detail.value)
	}

	// 液位界限的Input事件
	const ywLimitInput = e => {
		console.log(e.detail.value)
		setywLimit(e.detail.value)
	}

	return (
		<View className="water_supply_station_control_setting_wrap">
			<View className="hanzi text-16 font-bold mt-8 mb-8 px-4">水站控制</View>
			<View className="hanzi text-14 text-xx_text mb-14 px-4">
				您可以对水站类型设备进行开关控制
				<View className="tabs_box">
					<AtSegmentedControl
						values={["手动", "自动"]}
						onClick={tabsClick}
						current={currentMode}
					/>
				</View>
				{/* 手动模式显示内容 */}
				{currentMode == 0 ? (
					<View>
						{/* 污水和雨水切换 */}
						{/* 雨水 */}
						<View
							className="yw_select_item_box"
							onClick={() => {
								ywMouleClick(1)
							}}
						>
							<Image
								className="icon_img"
								src="https://d.lohand.com:1112/images/ConstantBlueCloud/wxminiprogram/ys_icon.png"
							></Image>
							<Text className="label_text">雨水</Text>
							{waterC == 1 ? (
								<Image
									className="jb_img"
									src="https://d.lohand.com:1112/images/ConstantBlueCloud/wxminiprogram/jb.png"
								></Image>
							) : null}
						</View>
						{/* 污水 */}
						<View
							className="yw_select_item_box"
							onClick={() => {
								ywMouleClick(2)
							}}
						>
							<Image
								className="icon_img"
								src="https://d.lohand.com:1112/images/ConstantBlueCloud/wxminiprogram/ws_icon.png"
							></Image>
							<Text className="label_text">污水</Text>
							{waterC == 2 ? (
								<Image
									className="jb_img"
									src="https://d.lohand.com:1112/images/ConstantBlueCloud/wxminiprogram/jb.png"
								></Image>
							) : null}
						</View>
					</View>
				) : null}
				{/* 自动模式显示内容 */}
				{currentMode == 1 ? (
					<View className="auto_mode_box">
						<View className="auto_set_item">
							<Text className="label_text">间隔时间：</Text>
							<Input
								className="h-full px-8 py-10 bg-white rounded-4"
								style="width:120px;"
								type="digit"
								placeholder="请输入间隔时间"
								value={intervalTime}
								onInput={e => {
									intervalTimeInput(e)
								}}
							/>
							<Text className="unit_text">分钟</Text>
						</View>
						<View className="auto_set_item">
							<Text className="label_text">液位界限：</Text>
							<Input
								className="h-full px-8  py-10 bg-white rounded-4"
								style="width:120px;"
								type="digit"
								placeholder="请输入间隔时间"
								value={ywLimit}
								onInput={e => {
									ywLimitInput(e)
								}}
							/>
						</View>
					</View>
				) : null}
			</View>

			<View className="btn_box">
				<AtButton type="primary" className="save_btn" onClick={sendSwitchFunc}>
					保存
				</AtButton>
			</View>
		</View>
	)
}
export default observer(waterSupplyStationControlSetting)
